<template>
    <div class="right-menu-box">
        <div class="right-menu">
            <div class="item-box">
                <router-link style="color:#333333"  to="/"><img src="/static/images/home.png" alt=""></router-link>
            </div>
            <div class="item-box" @click="showCustomer=!showCustomer">
                <img src="/static/images/customer.png" alt="">
            </div>
        </div>
        <div class="seek kefus" v-if="showCustomer">
            <div class="customercurpon bg-color">
                <p class="tubiaos"><img src="/static/images/customer.png" alt=""></p>
                <div class="bgs">
                    <p class="person">池塘边素材网</p>
<!--                    <p class="person2 active">注意：添加客服微信时请备注系统绑定的手机号</p>-->
                    <p class="canvas" style="border: .1rem solid #1AA97B!important;"><img src="/static/picture/wechat.png"></p>
                    <p class="person3">请长按二维码识别联系客服</p>
                </div>
                <img class="close" @click="showCustomer=!showCustomer" src="/static/images/closes.png">
            </div>
        </div>


    </div>

</template>

<script>
    export default {
        name: "login",
        model: {
            prop: 'visible',
            event: 'change'
        },
        components:{
        },
        props: {
            visible: Boolean,


        },
        data() {
            return {
                showCustomer: false,
            };
        },
        watch: {
            visible(newName, oldName) {

            }
        },
        created(){
        },

        methods: {


        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .right-menu{
        position: fixed;
        right:10px;
        top:50%;
        transform: translateY(-50%);
        z-index:15;
        .item-box{
            padding:5px;
            overflow: hidden;
            background: #ffffff;
            color: #1AA97B;
            box-shadow: 0 0 0.1rem rgb(0 0 0 / 30%);
            border-radius: 50%;
            &:first-child{
                margin-bottom:10px;
            }
            font-size:0px;
            img{
                width: 30px;
                height: 30px;
            }
        }
    }
    .seek{
        position: fixed;
        max-width: 640px;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.66);
        z-index: 99999;

        p{
            margin:0px 0px;
            padding: 0px 0px;
        }
        .customercurpon {
            border-radius: .2rem;
            width: 6rem;
            height: 8rem;
            position: relative;
            z-index: 999;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #1AA97B!important;
        }

        .customercurpon .tubiaos{
            width: 2.5rem;
            height: 2.5rem;
            position: absolute;
            top: -0.58rem;
            left: 1.75rem;
            background: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 80%;
                height: 80%;
            }
        }
        .customercurpon .bgs {
            position: absolute;
            height: 5.8rem;
            top: 2.2rem;
            font-weight: 600;
            width: 100%;
            border-bottom-left-radius: .2rem;
            border-bottom-right-radius: .2rem;
            color: #1AA97B;
            background-color: #fff;
        }
        .customercurpon .my-kefu2 {
            font-size: 2.5rem!important;
            color: #fff!important;
            font-weight: 500;
        }
        .customercurpon .person {
            position: absolute;
            top: 0.25rem;
            font-size: .48rem;
            color: #333;
            font-weight: 600;
            width: 100%;
        }
        .customercurpon .person2 {
            position: absolute;
            top: 1rem;
            font-size: .38rem;
            width: 90%;
            left: 5%;
            font-weight: 500;
            line-height: 1.2;
        }
        .customercurpon .canvas {
            bottom: 1.5rem;
            width: 2.5rem;
            height: 2.5rem;
            position: absolute;
            left: 1.75rem;
        }
        .customercurpon img {
            width: 100%;
        }
        .customercurpon .person3 {
            position: absolute;
            bottom: .4rem;
            font-size: .38rem;
            width: 90%;
            left: 5%;
            font-weight: 500;
            color: #333;
        }
        .customercurpon .close {
            width: 0.6rem;
            height: 0.6rem;
            position: absolute;
            bottom: -1rem;
            left: 2.7rem;
        }

    }
</style>
